<template>
  <el-dialog
    v-model="dialogSelect.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogSelect.title"
    draggable
    :close-delay="200"
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <div class="app-container">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
            <el-button @click="resetQuery">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
        height="260"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="name" label="人员名称" align="center" prop="name" width="" />
        <el-table-column key="cardNumber" label="身份证号" align="center" width="" prop="cardNumber"> </el-table-column>
        <el-table-column
          key="gender"
          label="性别"
          align="center"
          width=""
          prop="gender"
          :formatter="(item) => (item.gender == 1 ? '男' : item.gender == 2 ? '女' : '未知')"
        >
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <!--      </el-card>-->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { getPersonListByProjectAndCorp } from "@/api/employee/index";
import { ProjectManagerListType, ParamsType } from "@/api/corp/project/types";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 900;
  }
}

const emit = defineEmits(["selectSendClose"]);
const props = defineProps({
  dialogSelect: {
    type: Object,
    default: () => ({
      visible: false,
      title: "选择人员",
      corpId: "",
    }),
  },
  currentSystem: {
    type: String,
    default: () => "manager",
  },
});

const { dialogSelect } = toRefs(props);

let loading = ref(false);

const queryFormRef = ref<ElForm>();
const tableList = ref<ProjectManagerListType[]>();
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 20,
  corpId: 0,
});
let total = ref(0);

/* 发送关闭信息并返回选择信息 */
function selectSendClose(personInfo: any, query: boolean = false) {
  emit("selectSendClose", personInfo, query);
}

const handleCurrentChange = (val: any) => {
  closeDialog(val, true);
};

/* 选择人员 */
function select(info: any) {
  closeDialog(info, true);
}

/**
 * 关闭弹窗
 */
function closeDialog(info: any, query: boolean = false) {
  selectSendClose(info, query);
}

/**
 * 重置表单
 */
function resetForm() {
  queryFormRef.value.resetFields();
  queryFormRef.value.clearValidate();
}

/* 列表查询 */
async function handleQuery() {
  if (dialogSelect.value.corpId && dialogSelect.value.corpId > 0) {
    loading.value = true;
    let list;
    queryParams.corpId = dialogSelect.value.corpId;
    console.log("queryParams", queryParams);
    list = await getPersonListByProjectAndCorp(queryParams);
    if (list.type === 0) {
      if (list.success) {
        tableList.value = list.data.list;
        queryParams.pageIndex = list.data.pageNum;
        queryParams.pageSize = list.data.pageSize;
        total.value = list.data.total;
      } else {
        ElMessage.error(list.msg);
      }
    } else {
      ElMessage.error(list.msg);
    }
    loading.value = false;
  }
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

watch(
  () => dialogSelect.value.visible,
  (val) => {
    if (dialogSelect.value.visible) {
      console.log("dialogSelect", dialogSelect);
      handleQuery();
    }
  }
);

onMounted(() => {
  initScreen();

  handleQuery();
});

onUnmounted(() => {});
</script>

<style lang="less" scoped>
.app-container {
  padding: 0px;
}
</style>
